<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://www.backbase.com/bjs/core" prefix="bjs"%>

<f:subview id="EPtoolbarview">
	<bjs:view>
		<bjs:menuBar>
			<bjs:menuItem itemLabel="File">
				<bjs:menuItem itemLabel="User Preferences"/>
			  <bjs:menuItem itemLabel="Data Management"/>
				<bjs:menuItem itemLabel="Logout"/>
			</bjs:menuItem>
			<bjs:menuItem itemLabel="Data">
				<bjs:menuItem itemLabel="User Data"/>
				<bjs:menuItem itemLabel="Expression Data">
					<f:verbatim>
						<s:event b:on="click" b:action="select" b:target="id('ExpDatasrc')" />
					</f:verbatim>
				</bjs:menuItem>
				<bjs:menuItem itemLabel="Sequence Data">
					<f:verbatim>
						<s:event b:on="click" b:action="select" b:target="id('seqDatasrc')" />
					</f:verbatim>
				</bjs:menuItem>
				<bjs:menuItem itemLabel="Modeling Data">
					<f:verbatim>
						<s:event b:on="click" b:action="select" b:target="id('ModelingDatasrc')" />
					</f:verbatim>
				</bjs:menuItem>
				<bjs:menuItem itemLabel="Interaction Data"/>
				<bjs:menuItem itemLabel="Other Data Types"/>
			</bjs:menuItem>
			<bjs:menuItem itemLabel="Processing">
				<bjs:menuItem itemLabel="Transformations"/>
				<bjs:menuItem itemLabel="Clustering"/>
				<bjs:menuItem itemLabel="Protein Analysis"/>
				<bjs:menuItem itemLabel="Annotation"/>
				<bjs:menuItem itemLabel="Mining"/>
				<bjs:menuItem itemLabel="SPEXS"/>
				<bjs:menuItem itemLabel="Visual Pattern Matching"/>
				<bjs:menuItem itemLabel="WU-Blast"/>
				<bjs:menuItem itemLabel="Text Mining"/>
			</bjs:menuItem>
			<bjs:menuItem itemLabel="Modelling">
				<bjs:menuItem itemLabel="Data Modelling"/>
				<bjs:menuItem itemLabel="PLDE Modeling"/>
				<bjs:menuItem itemLabel="Curation Tool"/>
				<bjs:menuItem itemLabel="Resources"/>
			</bjs:menuItem>
			<bjs:menuItem itemLabel="Resources"/>
			<bjs:menuItem itemLabel="Help"/>
			<bjs:menuItem itemLabel="Component Help">
				<bjs:menuItem itemLabel="About"/>
			</bjs:menuItem>
		</bjs:menuBar>
		<bjs:outputText style="position: absolute; top: 0px; left:90%; padding: 2px; font-weight: bold" id="loginStatus" binding="#{controller.loginStatus}" value=""/>
		<f:verbatim>
			<div style="width:90%" xmlns="http://www.w3.org/1999/xhtml"
				xmlns:b="http://www.backbase.com/b"
				xmlns:s="http://www.backbase.com/s">
			
			<b:modal id="ExpDatasrc"
				style="position:absolute; width: 700px; height: 450px; right:50px ">
				<b:modalhead>Expresion data Upload</b:modalhead>
				<b:modalbody>


					<b:tabbox style="height=100%">
						<b:tab b:label="Custom Format" b:state="selected">
							<center>
							<table border="0">
								<tr>
									<!-- input matrix -->
									<td style="background-color: #F3F7F9; color: #666;"><!-- location -->
									Enter location of the data matrix on your computer:</td>

									<td align="right"><input type="text" size="20"></input> <b:button>Upload</b:button>
									</td>


								</tr>
								<tr>
									<!-- matrix URL -->
									<td style="background-color: #F3F7F9; color: #666;">or
									enter the data matrix URL</td>
									<td align="right"><input type="text" size="40"></input></td>

								</tr>
								<tr>
									<!-- type data file -->
									<td style="background-color: #F3F7F9; color: #666;">
									Select the type of your data file</td>
									<td align="right"><b:combobox></b:combobox></td>

								</tr>
								<!-- coordinates -->
								<td style="background-color: #F3F7F9; color: #666;">Enter
								the coordinates (x,y) where the data matrix starts in the input
								file. All the columns to the left of x will be used as row
								annotations, and all the rows above y will be used as column
								annotations. Column numbering starts with 1. If no rows/columns
								are provided for annotations, column/row names will be
								generated. The default setting of (2,2) will use the first
								column and row as column/row identifiers. Note: the image to the
								right is an example.</td>
								<td align="right"><img src="images/matrix.png" width="100%"
									height="100%" /></td>
								<td align="right">
								<center>X <input type="text" size="1"></input> <br />
								Y <input type="text" size="1"></input></center>
								</td>
								<tr>
									<!-- exp name -->
									<td style="background-color: #F3F7F9; color: #666;">Enter
									a name for your experiment (optional, but advised)</td>
									<td align="right"><input type="text" size="40"></input></td>

								</tr>

								<tr>
									<td></td>
									<td><b:button b:action="trigger" b:event="open"
										b:target="id('prb')">Execute</b:button> <b:button
										b:action="trigger" b:event="close" b:target="id('ExpDatasrc')">Close</b:button>
									</td>

								</tr>
							</table>

							</center>
						</b:tab>
						<b:tab b:label="Affymetrix">
							<b:accordeon style="width: 100%; background-color: #F3F7F9;">
								<b:accordeonhead>Upload the .CEL files directly from your computer</b:accordeonhead>
								<b:accordeonbody style="background-color:#f3f7f9">
									<table border="0">
										<tr>
											<td>Select the .CEL files directly from your computer</td>

											<td><input type="text" size="20" /><b:button>Select</b:button>
											</td>
										</tr>
										<tr>
											<td></td>
											<td><b:button b:action="load"
												b:url="diamonds/temp/datos.xml"
												b:destination="id('_sdb_loadexample')" b:mode="asfirstchild">Upload</b:button>
											</td>
										</tr>

									</table>
									<center><br />
									<br />
									<table class="filmTable" id="removeTable">
										<thead>
											<tr>
												<th style="width: 500px;">
												<center>Files to upload</center>
												</th>
											</tr>

										</thead>
										<tbody id="_sdb_loadexample" />
									</table>
									<s:behavior b:name="toggleRow">
										<s:event b:on="select" b:action="addclass"
											b:value="filmHighlightRow" />
										<s:event b:on="deselect" b:action="removeclass"
											b:value="filmHighlightRow" />
										<s:event b:on="mouseenter">
											<s:fxstyle b:background-color="#7d8fce" b:time="250" />
										</s:event>
										<s:event b:on="mouseleave">
											<s:fxstyle b:background-color="#ffffff" b:time="1000" />
										</s:event>
									</s:behavior> <br />
									<br />
									<table border="0" width="50%">
										<tr>
											<td align="center"><a b:action="remove"
												b:target="id('removeTable')/tbody/tr[*]">Clear uploaded
											items</a></td>
											<td align="left"></td>
										</tr>
									</table>
									<br />
									<br />
									<table border="0">
										<tr>
											<td>Enter a name for your experiment (optional, but
											advised)</td>

											<td><input type="text" size="40"></input></td>
										</tr>
										<tr>
											<td></td>
											<td align="left"><b:button>Execute</b:button> <b:button
												b:action="trigger" b:event="close"
												b:target="id('ExpDatasrc')">Close</b:button></td>

										</tr>
									</table>


									</center>

								</b:accordeonbody>
								<b:accordeonhead>OR enter the URL of an archive (TAR/GZ or ZIP) of the .CEL files </b:accordeonhead>
								<b:accordeonbody style="background-color:#f3f7f9">
									<table border="0">
										<tr>
											<td>Enter the URL of an archive of the .CEL files</td>
											<td><input type="text" size="40"></input></td>
										</tr>

										<tr>
											<td>Enter a name for your experiment (optional, but
											advised)</td>
											<td><input type="text" size="40"></input></td>
										</tr>
										<tr>
											<td></td>
											<td align="right"><b:button>Execute</b:button> <b:button
												b:action="trigger" b:event="close"
												b:target="id('ExpDatasrc')">Close</b:button></td>
										</tr>

									</table>
								</b:accordeonbody>
							</b:accordeon>



						</b:tab>
						<b:tab b:label="Array Express" style="background-color:#f3f7f9">
						</b:tab>
					</b:tabbox>

				</b:modalbody>
			</b:modal> <b:modal id="seqDatasrc"
				style="position:absolute; width: 700px; height: 450px; right:50px ">
				<b:modalhead>Sequence data upload</b:modalhead>
				<b:modalbody>
					<b:box>
						<hr />
						<h3>Data file</h3>
						<center>
						<table width="80%">
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Enter the location of the file with sequences on your computer</td>
								<td><input type="text" size="29" /><b:button> Upload </b:button>
								</td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								or enter the url where these data reside</td>
								<td><input type="Text" size="40"></input></td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Select the sequence format</td>
								<td><input type="text" size="29" /><b:button> Upload </b:button>
								</td>
							</tr>

						</table>

						</center>
						<hr />
						<h3>More info</h3>
						<center>
						<table width="80%">
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Select data species</td>
								<td><input type="text" size="29" /><b:button> Upload </b:button>
								</td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Enter a name for your experiment (optional but advised)</td>
								<td><input type="text" size="40"></input></td>
							</tr>

						</table>
						<hr />
						<br />
						<b:button>Execute</b:button> <b:button b:action="trigger"
							b:event="close" b:target="id('seqDatasrc')">Close</b:button></center>

					</b:box>



				</b:modalbody>
			</b:modal> <b:modal id="interactsrc"
				style="position:absolute; width: 700px; height: 450px; right:50px ">
				<b:modalhead>Interaction Data Upload</b:modalhead>
				<b:modalbody>
					<b:box>
						<hr />
						<h3>Data file</h3>
						<center>
						<table width="80%">
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Enter the location of the file with sequences on your computer</td>
								<td><input type="Text" size="29"></input><b:button> Upload </b:button>
								</td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								or enter the url where these data reside</td>
								<td><input type="text" size="40"></input></td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Select the sequence format</td>
								<td><input type="Text" size="29"></input><b:button> Upload </b:button>
								</td>
							</tr>

						</table>

						</center>
						<hr />
						<h3>More info</h3>
						<center>
						<table width="80%">
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Select data species</td>
								<td><input type="Text" size="29"></input><b:button> Upload </b:button>
								</td>
							</tr>
							<tr>
								<td width="60%" style="background-color: #F3F7F9; color: #666;">
								Enter a name for your experiment (optional but advised)</td>
								<td><input type="Text" size="40"></input></td>
							</tr>

						</table>
						<hr />
						<br />
						<b:button>Execute</b:button> <b:button b:action="trigger"
							b:event="close" b:target="id('interactsrc')">Close</b:button></center>

					</b:box>
				</b:modalbody>
			</b:modal> <b:modal id="aboutsrc">
				<b:modalhead>About</b:modalhead>
				<b:modalbody>
					<div class="textblock">About</div>
					<div style="position: absolute; right: 12px; bottom: 20px;">
					<b:button b:action="trigger" b:event="close"
						b:target="id('aboutsrc')">Close</b:button></div>
				</b:modalbody>
			</b:modal> <b:window id="helpsrc" b:open="false"
				style="position:absolute; width: 350px; height: 250px; top:25px; left:30px;"
				b:dragconstraint=".." b:resizeconstraint=".."
				b:windowbuttons="maximize,minimize,close ">
				<b:windowhead>Component Help</b:windowhead>
				<b:windowbody>
					<center>Diamonds Help</center>
					<p />
					<center></center>
				</b:windowbody>
			</b:window></div>
		</f:verbatim>
	</bjs:view>
</f:subview>
